<template>
	<view>
		<remind-carinfo :dataBean="dataBean"></remind-carinfo>

		<view class="formInfo">
			<u--form class="item" style="padding: 0 20rpx 110rpx;" :model="insuranceCompulsoryDto" ref="uform"
				label-width="auto" v-if="pageType == 1">

				<u-form-item label="保险公司">
					<u--input v-model="insuranceCompulsoryDto.compulsoryCompany" @click="pickerShow(1)"
						inputAlign="right" placeholder="请选择保险公司" border="none" disabled disabledColor="#ffffff">
					</u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>

				<u-form-item label="交强险开始时间">
					<u--input v-model="insuranceCompulsoryDto.compulsoryStartTime" @click="pickerShow(2)"
						inputAlign="right" placeholder="请选择开始日期" border="none" disabled disabledColor="#ffffff">
					</u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>

				<u-form-item label="交强险结束时间">
					<u--input v-model="insuranceCompulsoryDto.compulsoryEndTime" @click="pickerShow(3)"
						inputAlign="right" placeholder="请选择结束日期" border="none" disabled disabledColor="#ffffff">
					</u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>


				<u-form-item label="交强险保单号">
					<u--input v-model="insuranceCompulsoryDto.compulsoryNo" inputAlign="right" placeholder="输入保险单号"
						border="none">
					</u--input>
				</u-form-item>

				<u-form-item label="费用">
					<u--input v-model="insuranceCompulsoryDto.compulsoryAmount" inputAlign="right" placeholder="请输入费用"
						border="none">
					</u--input>
				</u-form-item>

				<u-form-item label="备注">
					<u--input v-model="insuranceCompulsoryDto.compulsoryRemark" inputAlign="right" placeholder="请输入备注"
						border="none">
					</u--input>
				</u-form-item>

				<text style="padding: 20rpx 0; display: block;">保单照片</text>

				<srUpload :maxCount="2" @uploadResult="uploadResult"></srUpload>
				<srUpload :maxCount="4" @uploadResult="uploadResult"></srUpload>
			</u--form>


			<u--form class="item" customStyle="padding: 0 20rpx 110rpx;" :model="commercialAddPO" ref="uform"
				label-width="auto" v-if="pageType == 2">

				<u-form-item label="保险公司">
					<u--input v-model="commercialAddPO.commercialCompany" @click="pickerShow(4)" inputAlign="right"
						placeholder="请选择保险公司" border="none" disabled disabledColor="#ffffff"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>

				<u-form-item label="商业险开始时间">
					<u--input v-model="commercialAddPO.commercialStartTime" @click="pickerShow(5)" inputAlign="right"
						placeholder="请选择开始日期" border="none" disabled disabledColor="#ffffff"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>

				<u-form-item label="商业险结束时间">
					<u--input v-model="commercialAddPO.commercialEndTime" @click="pickerShow(6)" inputAlign="right"
						placeholder="请选择结束日期" border="none" disabled disabledColor="#ffffff"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>


				<u-form-item label="商业险保单号">
					<u--input v-model="commercialAddPO.commercialNo" inputAlign="right" placeholder="输入保险单号"
						border="none">
					</u--input>
				</u-form-item>

				<u-form-item label="费用">
					<u--input v-model="commercialAddPO.commercialTotalAmount" inputAlign="right" placeholder="请输入费用"
						border="none">
					</u--input>
				</u-form-item>

				<u-form-item label="商业险险种">
					<u--input v-model="commercialTypeTitle" @click="addCommercialTypes" inputAlign="right"
						placeholder="添加商业险险种" border="none" disabled disabledColor="#ffffff"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>

				<u-form-item label="备注">
					<u--input v-model="commercialAddPO.commercialRemark" inputAlign="right" placeholder="请输入备注"
						border="none">
					</u--input>
				</u-form-item>

				<text style="padding: 20rpx 0; display: block;">保单照片</text>
				<srUpload :maxCount="3" @uploadResult="uploadResult"></srUpload>
				
			</u--form>
		</view>


		<view class="bottom">
			<text @click="commit">提 交</text>
		</view>


	</view>
</template>

<script>
	import remindCarinfo from '@/components/remindCarInfo/remind-carinfo.vue';
	import srUpload from '@/components/upload/sr-upload.vue'
	export default {
		components: {
			remindCarinfo,
			srUpload
		},
		data() {
			return {
				dataBean: {},
				pageType: 1,
				commercialTypeTitle: '',
				//交强险信息
				insuranceCompulsoryDto: {
					compulsoryStartTime: String,
					compulsoryEndTime: String,
					compulsoryNo: String,
					compulsoryCompanyId: String,
					compulsoryCompany: String,
					compulsoryAmount: String,
					compulsoryRemark: String,
					compulsorySysAccessoryList: []
				},
				//商业险信息
				commercialAddPO: {
					commercialStartTime: String,
					commercialEndTime: String,
					commercialNo: String,
					commercialCompanyId: String,
					commercialCompany: String,
					commercialTotalAmount: String,
					commercialRemark: String,
					commercialInsuranceRecordList: [],
					commercialSysAccessoryList: []
				},
			}
		},
		onLoad(op) {
			this.pageType = op.pageType;
		},
		methods: {
			uploadResult(urls) {
				console.log(urls);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.formInfo {
		margin: 20rpx;
		padding: 20rpx 30rpx;
		background: #ffffff;
		border-radius: 18rpx;
		padding-bottom: 120rpx;

	}
</style>
